<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>woman</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
        ul>li{
            list-style: none;
            display: inline-block;
        }
        #top{
            overflow: hidden;
            width: 900px;
        }
        #left{
            float: left;
        }
        #right{
            float: right;
        }

    </style>
    <script src="min_jq/min.js"></script>
</head>
<body>
    <div id="top">
        <div id="left">相关图片</div>
        <div><button id="right">换一换</button></div>
    </div>

<ul>
    <li>
        <img src="picture/test1.png" alt="" id="0">
        <h3><a href="javascript:">第一个</a></h3>
        <p>第一类</p>
    </li>
    <li>
        <img src="picture/test2.png" alt="" id="1">
        <h3><a href="javascript:">第二个</a></h3>
        <p>第二类</p>
    </li>
    <li>
        <img src="picture/test3.png" alt="" id="2">
        <h3><a href="javascript:">第三个</a></h3>
        <p>第三类</p>
    </li>
</ul>
<script>
    var women=[{url:"picture/test1.png",name:"第一个",class:"第一类"},
    {url:"picture/test2.png",name:"第二个",class:"第一类"},
    {url:"picture/test3.png",name:"第三个",class:"第三类"},
    {url:"picture/test4.png",name:"第四个",class:"第四类"},
        {url:"picture/test5.png",name:"第五个",class:"第五类"}]
    $("#right").on("click",function (){
        var tmp=create_arr(3);
        for (i=0;i<tmp.length;i++){
            real_number="#"+i.toString()
            console.log(women[tmp[i]].url)
            $(real_number).attr("src",women[tmp[i]].url)
        }
    })
    function create_arr(count){
        var TmpArr=[]
        for (var i=0;i<count;i++){
            tmp_number=Math.floor(Math.random()*women.length)
            TmpArr.push(tmp_number)
        }
        return TmpArr
    }


</script>
</body>
</html>